<template>
  <div class="app-container">
    <div class="voice-guide">
      <h3>语音控制指南</h3>
      <p>点击下方按钮，说出以下指令：</p>
      <ul>
        <li>切换主题： "深色模式"、"夜间模式"、"浅色模式"、"日间模式"</li>
        <li>调整颜色： "使用红色主题"、"使用蓝色主题"、"使用绿色主题"</li>
        <li>界面操作： "全屏显示"、"退出全屏"</li>
        <!-- <li>字体大小： "大字体"、"小字体"、"默认字体"</li> -->
        <li>色弱模式： "开启色弱模式"、"关闭色弱模式"</li>
        <li>快捷指令： "打开智能体"、"打开官网"、"打开教务系统"、"打开邮箱"</li>
      </ul>
    </div>
    <el-button
      type="primary"
      @click="startSpeechRecognition"
      :disabled="isListening"
      class="voice-btn"
    >
      {{ isListening ? "正在聆听..." : "语音输入" }}
    </el-button>

    <!-- 语音识别内容展示 -->
    <div v-if="recognizedText" class="recognized-text">
      <el-text
        type="info"
        :class="{
          'error-text':
            recognizedText.includes('语音识别失败') || recognizedText.includes('未识别的指令'),
        }"
      >
        识别内容：{{ recognizedText }}
      </el-text>
    </div>
  </div>
</template>

<script setup>
import * as SpeechSDK from "microsoft-cognitiveservices-speech-sdk";

import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const azureSpeechKey = import.meta.env.VITE_AZURE_SPEECH_KEY;
const azureRegion = import.meta.env.VITE_AZURE_REGION;
const isListening = ref(false);
// 用于存储识别内容
const recognizedText = ref("");

// 语音识别
const startSpeechRecognition = () => {
  isListening.value = true;
  recognizedText.value = "";
  const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(azureSpeechKey, azureRegion);
  // 先支持中文
  speechConfig.speechRecognitionLanguage = "zh-CN";

  const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
  const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);

  recognizer.recognizeOnceAsync(
    (result) => {
      isListening.value = false;
      if (result.reason === SpeechSDK.ResultReason.RecognizedSpeech) {
        recognizedText.value = result.text; // 更新识别内容
        processVoiceCommand(result.text);
      }
    },
    (error) => {
      isListening.value = false;
      recognizedText.value = `语音识别失败`;
      console.error("语音识别失败:", error);
    }
  );
};

// 处理语音指令
const processVoiceCommand = (command) => {
  // 主题模式
  if (command.match(/深色模式|夜间模式|黑暗模式|暗黑模式/i)) {
    window.parent.postMessage({ type: "themeChange", data: "dark" }, "*");
  } else if (command.match(/浅色模式|日间模式|明亮模式|白天模式/i)) {
    window.parent.postMessage({ type: "themeChange", data: "light" }, "*");
  }
  // 主题颜色
  else if (command.match(/蓝色主题|蓝色模式|使用蓝色/i)) {
    window.parent.postMessage({ type: "themeColor", data: "#4080FF" }, "*");
  } else if (command.match(/绿色主题|绿色模式|使用绿色/i)) {
    window.parent.postMessage({ type: "themeColor", data: "#23c343" }, "*");
  } else if (command.match(/红色主题|红色模式|使用红色/i)) {
    window.parent.postMessage({ type: "themeColor", data: "#f76560" }, "*");
  } else if (command.match(/紫色主题|紫色模式|使用紫色/i)) {
    window.parent.postMessage({ type: "themeColor", data: "#800080" }, "*");
  } else if (command.match(/橙色主题|橙色模式|使用橙色/i)) {
    window.parent.postMessage({ type: "themeColor", data: "#ff9a2e" }, "*");
  }
  // 全屏操作
  else if (command.match(/全屏显示|进入全屏|最大化/i)) {
    window.parent.postMessage({ type: "fullscreen", data: "enter" }, "*");
  } else if (command.match(/退出全屏|最小化|恢复窗口/i)) {
    window.parent.postMessage({ type: "fullscreen", data: "exit" }, "*");
  }
  // 字体大小操作
  else if (command.match(/字体大型|大字体|放大字体/i)) {
    window.parent.postMessage({ type: "sizeChange", data: "large" }, "*");
  } else if (command.match(/字体小型|小字体|缩小字体/i)) {
    window.parent.postMessage({ type: "sizeChange", data: "small" }, "*");
  } else if (command.match(/默认字体|标准字体|恢复字体/i)) {
    window.parent.postMessage({ type: "sizeChange", data: "default" }, "*");
  }
  // 色弱模式
  else if (command.match(/开启色弱模式/i)) {
    window.parent.postMessage({ type: "invertMode", data: true }, "*");
  } else if (command.match(/关闭色弱模式|退出色弱模式/i)) {
    window.parent.postMessage({ type: "invertMode", data: false }, "*");
  }
  // 快捷指令
  else if (command.match(/打开智能体/i)) {
    router.push("/doc/internal-doc");
  } else if (command.match(/打开DeepSeek/i)) {
    window.open("https://chat.deepseek.com/", "_blank");
  } else if (command.match(/打开官网/i)) {
    window.open("https://www.neusoft.edu.cn/", "_blank");
  } else if (command.match(/打开教务系统/i)) {
    window.open("https://newjw.neusoft.edu.cn/", "_blank");
  } else if (command.match(/打开邮箱/i)) {
    window.open("https://mail.neusoft.edu.cn/", "_blank");
  } else {
    recognizedText.value = `未识别的指令：${command}`;
    console.log("未识别的指令:", command);
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 26px;
}

.voice-guide {
  max-width: 1000px;
  padding: 0 20px;
  margin-bottom: 15px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);

  h3 {
    margin: 15px 0;
    color: var(--el-text-color-primary);
  }

  p {
    margin: 10px 0;
    color: var(--el-text-color-regular);
  }

  ul {
    padding-left: 20px;
    list-style-type: disc;

    li {
      margin-bottom: 8px;
      color: var(--el-text-color-secondary);
    }
  }
}

.voice-btn {
  width: 200px;
  height: 50px;
  font-size: 24px;
}

.recognized-text {
  width: 100%;
  max-width: 600px;
  text-align: center;
  background-color: var(--el-bg-color-page);
  border-radius: 8px;

  p {
    margin-bottom: 8px;
    font-weight: bold;
  }

  .error-text {
    font-weight: bold;
    color: var(--el-color-danger);
  }
}
</style>
